<template>
  <div style="margin-top: 60px;overflow-y: scroll">
    <div style="margin: -100px auto 40px"></div>
    <div v-if="list.length === 0">
      <div style="text-align: center;margin-top: 20%;font-size: 40px"><i class="el-icon-box"></i></div>
      <div style="text-align: center;margin-top: 20px;font-size: 20px">暂无消息</div>
      <div style="font-size: 10px;text-align: center;margin-top: 100px">在 '个人中心' 可向所在养老院的管理员申请角色</div>
    </div>
    <el-row>
      <el-col :span="7" v-for="(msg,index) in list" :key="index">
        <el-card v-if="msg.role!=null" class="box-card" style="height: 240px;width: 360px;margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ msg.careHomeName }}</span>
            <span style="float: right">{{ msg.status === null ? '待审核' : msg.status === 1 ? '已通过' : '已拒绝' }}</span>
            <div class="bot" :style="botStyle(msg.status)"></div>
          </div>
          <div style="display: flex;flex-direction: column">
            <span>
              <span style="font-size: 18px">{{ msg.name }}</span>
              <span style="color: var(--lightText)"> 申请成为 </span>
              <span style="font-size: 18px">{{ role(msg.role) }}</span>
            </span>
            <span style="font-size: 13px;margin-top: 10px;font-weight: lighter">{{ timeFormat(msg.createTime) }}</span>
          </div>
          <div v-if="msg.status===null" style="margin-top: 30px">
            <svg @click="changeStatus(msg,1)" style="margin-right: 40px" t="1691929152802" class="icon cardBtnActive"
                 viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="4965" width="55" height="55">
              <path
                  d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z"
                  fill="var(--success)" p-id="4966"></path>
              <path
                  d="M768 375.466667L437.333333 708.266667c-8.533333 8.533333-21.333333 8.533333-29.866666 0l-29.866667-29.866667c-8.533333-8.533333-8.533333-21.333333 0-29.866667l332.8-332.8c8.533333-8.533333 21.333333-8.533333 29.866667 0l29.866666 29.866667c6.4 8.533333 6.4 21.333333-2.133333 29.866667z"
                  fill="#FFFFFF" p-id="4967"></path>
              <path
                  d="M315.733333 497.066667l151.466667 151.466666c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 8.533333-21.333333 8.533333-29.866666 0L256 556.8c-8.533333-8.533333-8.533333-21.333333 0-29.866667l29.866667-29.866666c8.533333-8.533333 21.333333-8.533333 29.866666 0z"
                  fill="#FFFFFF" p-id="4968"></path>
            </svg>
            <svg @click="changeStatus(msg,0)" t="1691929364835" class="icon cardBtnActive" viewBox="0 0 1024 1024"
                 version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="5313" width="55" height="55">
              <path
                  d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z"
                  fill="var(--danger)" p-id="5314"></path>
              <path
                  d="M648.533333 708.266667L315.733333 375.466667c-8.533333-8.533333-8.533333-21.333333 0-29.866667l29.866667-29.866667c8.533333-8.533333 21.333333-8.533333 29.866667 0l332.8 332.8c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 8.533333-21.333333 8.533333-29.866667 0z"
                  fill="#FFFFFF" p-id="5315"></path>
              <path
                  d="M315.733333 648.533333l332.8-332.8c8.533333-8.533333 21.333333-8.533333 29.866667 0l29.866667 29.866667c8.533333 8.533333 8.533333 21.333333 0 29.866667L375.466667 708.266667c-8.533333 8.533333-21.333333 8.533333-29.866667 0l-29.866667-29.866667c-8.533333-8.533333-8.533333-21.333333 0-29.866667z"
                  fill="#FFFFFF" p-id="5316"></path>
            </svg>
          </div>
          <div v-else-if="msg.status ===1" style="margin-top: 30px">
            <div class="cardBtnStatic"
                 style="width: 145px;height: 50px;background-color: var(--success);border-radius: 25px">
              <svg style="margin: 0 48px" t="1691929152802" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="4965" width="50" height="50">
                <path
                    d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z"
                    fill="var(--success)" p-id="4966"></path>
                <path
                    d="M768 375.466667L437.333333 708.266667c-8.533333 8.533333-21.333333 8.533333-29.866666 0l-29.866667-29.866667c-8.533333-8.533333-8.533333-21.333333 0-29.866667l332.8-332.8c8.533333-8.533333 21.333333-8.533333 29.866667 0l29.866666 29.866667c6.4 8.533333 6.4 21.333333-2.133333 29.866667z"
                    fill="#FFFFFF" p-id="4967"></path>
                <path
                    d="M315.733333 497.066667l151.466667 151.466666c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 8.533333-21.333333 8.533333-29.866666 0L256 556.8c-8.533333-8.533333-8.533333-21.333333 0-29.866667l29.866667-29.866666c8.533333-8.533333 21.333333-8.533333 29.866666 0z"
                    fill="#FFFFFF" p-id="4968"></path>
              </svg>
            </div>
          </div>
          <div v-else style="margin-top: 30px">
            <div class="cardBtnStatic"
                 style="width: 145px;height: 50px;background-color: var(--danger);border-radius: 25px">
              <svg style="margin: 0 48px" t="1691929364835" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="5313" width="50" height="50">
                <path
                    d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z"
                    fill="var(--danger)" p-id="5314"></path>
                <path
                    d="M648.533333 708.266667L315.733333 375.466667c-8.533333-8.533333-8.533333-21.333333 0-29.866667l29.866667-29.866667c8.533333-8.533333 21.333333-8.533333 29.866667 0l332.8 332.8c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 8.533333-21.333333 8.533333-29.866667 0z"
                    fill="#FFFFFF" p-id="5315"></path>
                <path
                    d="M315.733333 648.533333l332.8-332.8c8.533333-8.533333 21.333333-8.533333 29.866667 0l29.866667 29.866667c8.533333 8.533333 8.533333 21.333333 0 29.866667L375.466667 708.266667c-8.533333 8.533333-21.333333 8.533333-29.866667 0l-29.866667-29.866667c-8.533333-8.533333-8.533333-21.333333 0-29.866667z"
                    fill="#FFFFFF" p-id="5316"></path>
              </svg>
            </div>
          </div>
        </el-card>
        <el-card v-if="msg.elderId!=null" class="box-card" style="height: 240px;width: 360px;margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ msg.careHomeName }}</span>
            <span style="float: right">{{ msg.status === null ? '待审核' : msg.status === 1 ? '已通过' : '已拒绝' }}</span>
            <div class="bot" :style="botStyle(msg.status)"></div>
          </div>
          <div style="display: flex;flex-direction: column">
            <span>
              <span style="font-size: 18px">{{ getUserName(msg.userId) }}</span>
              <span style="color: var(--lightText)"> 申请绑定老人 </span>
              <span style="font-size: 18px">{{ getElderName(msg.elderId) }}</span>
            </span>
            <span style="font-size: 13px;margin-top: 10px;font-weight: lighter">{{ timeFormat(msg.createTime) }}</span>
          </div>
          <div v-if="msg.status===null" style="margin-top: 30px">
            <svg @click="changeStatus2(msg,1)" style="margin-right: 40px" t="1691929152802" class="icon cardBtnActive"
                 viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="4965" width="55" height="55">
              <path
                  d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z"
                  fill="var(--success)" p-id="4966"></path>
              <path
                  d="M768 375.466667L437.333333 708.266667c-8.533333 8.533333-21.333333 8.533333-29.866666 0l-29.866667-29.866667c-8.533333-8.533333-8.533333-21.333333 0-29.866667l332.8-332.8c8.533333-8.533333 21.333333-8.533333 29.866667 0l29.866666 29.866667c6.4 8.533333 6.4 21.333333-2.133333 29.866667z"
                  fill="#FFFFFF" p-id="4967"></path>
              <path
                  d="M315.733333 497.066667l151.466667 151.466666c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 8.533333-21.333333 8.533333-29.866666 0L256 556.8c-8.533333-8.533333-8.533333-21.333333 0-29.866667l29.866667-29.866666c8.533333-8.533333 21.333333-8.533333 29.866666 0z"
                  fill="#FFFFFF" p-id="4968"></path>
            </svg>
            <svg @click="changeStatus2(msg,0)" t="1691929364835" class="icon cardBtnActive" viewBox="0 0 1024 1024"
                 version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="5313" width="55" height="55">
              <path
                  d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z"
                  fill="var(--danger)" p-id="5314"></path>
              <path
                  d="M648.533333 708.266667L315.733333 375.466667c-8.533333-8.533333-8.533333-21.333333 0-29.866667l29.866667-29.866667c8.533333-8.533333 21.333333-8.533333 29.866667 0l332.8 332.8c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 8.533333-21.333333 8.533333-29.866667 0z"
                  fill="#FFFFFF" p-id="5315"></path>
              <path
                  d="M315.733333 648.533333l332.8-332.8c8.533333-8.533333 21.333333-8.533333 29.866667 0l29.866667 29.866667c8.533333 8.533333 8.533333 21.333333 0 29.866667L375.466667 708.266667c-8.533333 8.533333-21.333333 8.533333-29.866667 0l-29.866667-29.866667c-8.533333-8.533333-8.533333-21.333333 0-29.866667z"
                  fill="#FFFFFF" p-id="5316"></path>
            </svg>
          </div>
          <div v-else-if="msg.status ===1" style="margin-top: 30px">
            <div class="cardBtnStatic"
                 style="width: 145px;height: 50px;background-color: var(--success);border-radius: 25px">
              <svg style="margin: 0 48px" t="1691929152802" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="4965" width="50" height="50">
                <path
                    d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z"
                    fill="var(--success)" p-id="4966"></path>
                <path
                    d="M768 375.466667L437.333333 708.266667c-8.533333 8.533333-21.333333 8.533333-29.866666 0l-29.866667-29.866667c-8.533333-8.533333-8.533333-21.333333 0-29.866667l332.8-332.8c8.533333-8.533333 21.333333-8.533333 29.866667 0l29.866666 29.866667c6.4 8.533333 6.4 21.333333-2.133333 29.866667z"
                    fill="#FFFFFF" p-id="4967"></path>
                <path
                    d="M315.733333 497.066667l151.466667 151.466666c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 8.533333-21.333333 8.533333-29.866666 0L256 556.8c-8.533333-8.533333-8.533333-21.333333 0-29.866667l29.866667-29.866666c8.533333-8.533333 21.333333-8.533333 29.866666 0z"
                    fill="#FFFFFF" p-id="4968"></path>
              </svg>
            </div>
          </div>
          <div v-else style="margin-top: 30px">
            <div class="cardBtnStatic"
                 style="width: 145px;height: 50px;background-color: var(--danger);border-radius: 25px">
              <svg style="margin: 0 48px" t="1691929364835" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="5313" width="50" height="50">
                <path
                    d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z"
                    fill="var(--danger)" p-id="5314"></path>
                <path
                    d="M648.533333 708.266667L315.733333 375.466667c-8.533333-8.533333-8.533333-21.333333 0-29.866667l29.866667-29.866667c8.533333-8.533333 21.333333-8.533333 29.866667 0l332.8 332.8c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 8.533333-21.333333 8.533333-29.866667 0z"
                    fill="#FFFFFF" p-id="5315"></path>
                <path
                    d="M315.733333 648.533333l332.8-332.8c8.533333-8.533333 21.333333-8.533333 29.866667 0l29.866667 29.866667c8.533333 8.533333 8.533333 21.333333 0 29.866667L375.466667 708.266667c-8.533333 8.533333-21.333333 8.533333-29.866667 0l-29.866667-29.866667c-8.533333-8.533333-8.533333-21.333333 0-29.866667z"
                    fill="#FFFFFF" p-id="5316"></path>
              </svg>
            </div>
          </div>
        </el-card>
        <el-card v-if="msg.role==null&&msg.elderId==null" class="box-card"
                 style="height: 240px;width: 360px;margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ msg.careHomeName }}</span>
            <span style="float: right">{{ msg.status === null ? '待审核' : msg.status === 1 ? '已通过' : '已拒绝' }}</span>
            <div class="bot" :style="botStyle(msg.status)"></div>
          </div>
          <div style="display: flex;flex-direction: column">
           <span>
              <span style="font-size: 18px">{{ getUserName(msg.userId) }}</span>
              <span style="color: var(--lightText)"> 申请绑定至 </span>
              <span style="font-size: 18px">{{ msg.careHomeName }}</span>
            </span>
            <span style="font-size: 13px;margin-top: 10px;font-weight: lighter">{{ timeFormat(msg.createTime) }}</span>
          </div>
          <div v-if="msg.status===null" style="margin-top: 30px">
            <svg @click="changeStatus3(msg,1)" style="margin-right: 40px" t="1691929152802" class="icon cardBtnActive"
                 viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="4965" width="55" height="55">
              <path
                  d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z"
                  fill="var(--success)" p-id="4966"></path>
              <path
                  d="M768 375.466667L437.333333 708.266667c-8.533333 8.533333-21.333333 8.533333-29.866666 0l-29.866667-29.866667c-8.533333-8.533333-8.533333-21.333333 0-29.866667l332.8-332.8c8.533333-8.533333 21.333333-8.533333 29.866667 0l29.866666 29.866667c6.4 8.533333 6.4 21.333333-2.133333 29.866667z"
                  fill="#FFFFFF" p-id="4967"></path>
              <path
                  d="M315.733333 497.066667l151.466667 151.466666c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 8.533333-21.333333 8.533333-29.866666 0L256 556.8c-8.533333-8.533333-8.533333-21.333333 0-29.866667l29.866667-29.866666c8.533333-8.533333 21.333333-8.533333 29.866666 0z"
                  fill="#FFFFFF" p-id="4968"></path>
            </svg>
            <svg @click="changeStatus3(msg,0)" t="1691929364835" class="icon cardBtnActive" viewBox="0 0 1024 1024"
                 version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="5313" width="55" height="55">
              <path
                  d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z"
                  fill="var(--danger)" p-id="5314"></path>
              <path
                  d="M648.533333 708.266667L315.733333 375.466667c-8.533333-8.533333-8.533333-21.333333 0-29.866667l29.866667-29.866667c8.533333-8.533333 21.333333-8.533333 29.866667 0l332.8 332.8c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 8.533333-21.333333 8.533333-29.866667 0z"
                  fill="#FFFFFF" p-id="5315"></path>
              <path
                  d="M315.733333 648.533333l332.8-332.8c8.533333-8.533333 21.333333-8.533333 29.866667 0l29.866667 29.866667c8.533333 8.533333 8.533333 21.333333 0 29.866667L375.466667 708.266667c-8.533333 8.533333-21.333333 8.533333-29.866667 0l-29.866667-29.866667c-8.533333-8.533333-8.533333-21.333333 0-29.866667z"
                  fill="#FFFFFF" p-id="5316"></path>
            </svg>
          </div>
          <div v-else-if="msg.status ===1" style="margin-top: 30px">
            <div class="cardBtnStatic"
                 style="width: 145px;height: 50px;background-color: var(--success);border-radius: 25px">
              <svg style="margin: 0 48px" t="1691929152802" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="4965" width="50" height="50">
                <path
                    d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z"
                    fill="var(--success)" p-id="4966"></path>
                <path
                    d="M768 375.466667L437.333333 708.266667c-8.533333 8.533333-21.333333 8.533333-29.866666 0l-29.866667-29.866667c-8.533333-8.533333-8.533333-21.333333 0-29.866667l332.8-332.8c8.533333-8.533333 21.333333-8.533333 29.866667 0l29.866666 29.866667c6.4 8.533333 6.4 21.333333-2.133333 29.866667z"
                    fill="#FFFFFF" p-id="4967"></path>
                <path
                    d="M315.733333 497.066667l151.466667 151.466666c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 8.533333-21.333333 8.533333-29.866666 0L256 556.8c-8.533333-8.533333-8.533333-21.333333 0-29.866667l29.866667-29.866666c8.533333-8.533333 21.333333-8.533333 29.866666 0z"
                    fill="#FFFFFF" p-id="4968"></path>
              </svg>
            </div>
          </div>
          <div v-else style="margin-top: 30px">
            <div class="cardBtnStatic"
                 style="width: 145px;height: 50px;background-color: var(--danger);border-radius: 25px">
              <svg style="margin: 0 48px" t="1691929364835" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="5313" width="50" height="50">
                <path
                    d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z"
                    fill="var(--danger)" p-id="5314"></path>
                <path
                    d="M648.533333 708.266667L315.733333 375.466667c-8.533333-8.533333-8.533333-21.333333 0-29.866667l29.866667-29.866667c8.533333-8.533333 21.333333-8.533333 29.866667 0l332.8 332.8c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 8.533333-21.333333 8.533333-29.866667 0z"
                    fill="#FFFFFF" p-id="5315"></path>
                <path
                    d="M315.733333 648.533333l332.8-332.8c8.533333-8.533333 21.333333-8.533333 29.866667 0l29.866667 29.866667c8.533333 8.533333 8.533333 21.333333 0 29.866667L375.466667 708.266667c-8.533333 8.533333-21.333333 8.533333-29.866667 0l-29.866667-29.866667c-8.533333-8.533333-8.533333-21.333333 0-29.866667z"
                    fill="#FFFFFF" p-id="5316"></path>
              </svg>
            </div>
          </div>
        </el-card>
      </el-col>
      <!--在每行不够三个时填充-->
      <el-col :span="7" v-if="list.length%3!==0"></el-col>
      <el-col :span="7" v-if="list.length%3===1"></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Message",
  data() {
    return {
      //消息列表
      list: [],
      //用户信息
      user: {},
      users: [],
      //老人
      elders: []
    }
  },
  methods: {
    getList() {
      this.request.get('/identity-verification/listByName', {
        params: {
          name: this.user.careHomeName
        }
      }).then(res => {
        if (res.code === '200') {
          //获取数据
          this.list = res.data
          //获取另外两个数据
          this.getBindElder()
        } else {
          this.$notify({
            type: 'error',
            title: '获取消息列表错误',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取消息列表错误',
          message: err
        })
      })
    },
    //根据用户role属性判断角色
    role(r) {
      if (r === 1) {
        return '护工'
      } else if (r === 0) {
        return '老人'
      } else if (r === 2) {
        return '管理员'
      } else if (r === -2) {
        return '游客'
      } else {
        return '家属'
      }
    },
    //根据Date字符串返回可供显示的时间
    timeFormat(time) {
      let date = new Date(time)
      return date.getFullYear() + '年' + this.zeroTool(date.getMonth() + 1) + '月' + this.zeroTool(date.getDate()) + '日 ' + this.zeroTool(date.getHours()) + ':' + this.zeroTool(date.getMinutes());
    },
    //自动补零工具
    zeroTool(s) {
      s = s.toString()
      if (s.length === 1) {
        return '0' + s
      }
      return s
    },
    //样式颜色判断
    botStyle(status) {
      if (status === null) {
        return 'background: var(--btn)'
      } else {
        return status === 1 ? 'background: var(--success)' : 'background: var(--danger)'
      }
    },
    //同意和拒绝申请
    changeStatus(msg, status) {
      msg.status = status
      this.request.put('/identity-verification/update', msg).then(res => {
        if (res.code === '200') {
          this.$notify({
            type: 'success',
            title: '审核成功',
            message: `已${status === 1 ? '通过' : '拒绝'}${msg.name}的请求`
          })
        } else {
          this.$notify({
            type: 'error',
            title: '审核失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '审核失败',
          message: err
        })
      })
    },
    //同意和拒绝申请
    changeStatus2(msg, status) {
      msg.status = status
      this.request.put('/msg-bind-elder/update', msg).then(res => {
        if (res.code === '200') {
          this.$notify({
            type: 'success',
            title: '审核成功',
            message: `已${status === 1 ? '通过' : '拒绝'}${this.getUserName(msg.userId)}的请求`
          })
        } else {
          this.$notify({
            type: 'error',
            title: '审核失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '审核失败',
          message: err
        })
      })
    },
    //同意和拒绝申请
    changeStatus3(msg, status) {
      msg.status = status
      this.request.put('/msg-bind-care-home/update', msg).then(res => {
        if (res.code === '200') {
          this.$notify({
            type: 'success',
            title: '审核成功',
            message: `已${status === 1 ? '通过' : '拒绝'}${this.getUserName(msg.userId)}的请求`
          })
        } else {
          this.$notify({
            type: 'error',
            title: '审核失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '审核失败',
          message: err
        })
      })
    },
    //将数组排序
    customSort(arr) {
      // 根据 status 属性将数组分成三个部分
      const nullStatus = [];
      const status1 = [];
      const status0 = [];

      arr.forEach(item => {
        if (item.status === null) {
          nullStatus.push(item);
        } else if (item.status === 1) {
          status1.push(item);
        } else if (item.status === 0) {
          status0.push(item);
        }
      });

      // 根据 createTime 属性对每个部分进行排序，降序排列（越新的排在前面）
      nullStatus.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
      status1.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
      status0.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));

      // 按照指定顺序组合排序后的部分（null、status1、status0）
      this.list = [...nullStatus, ...status1, ...status0];
    },

    //获取绑定消息数据
    getBindElder() {
      this.request.get('/msg-bind-elder/query-by-name', {
        params: {
          name: this.user.careHomeName
        }
      }).then(res => {
        if (res.code === '200') {
          //获取数据
          this.list = this.list.concat(res.data)
          this.getBindCareHome()
        } else {
          this.$notify({
            type: 'error',
            title: '获取消息列表错误',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取消息列表错误',
          message: err
        })
      })
    },
    getBindCareHome() {
      this.request.get('/msg-bind-care-home/query-by-name', {
        params: {
          name: this.user.careHomeName
        }
      }).then(res => {
        if (res.code === '200') {
          //获取数据
          this.list = this.list.concat(res.data)
          this.customSort(this.list)
        } else {
          this.$notify({
            type: 'error',
            title: '获取消息列表错误',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取消息列表错误',
          message: err
        })
      })
    },
    //获取用户
    getUsers() {
      this.request.get('/user/query-by-care-home', {
        params: {
          name: this.user.careHomeName
        }
      }).then(res => {
        if (res.code === '200') {
          this.users = res.data
        } else {
          this.$notify({
            type: 'error',
            title: '获取用户列表错误',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取用户列表错误',
          message: err
        })
      })
    },
    getElders() {
      this.request.get('/elderly-information/query-elders', {
        params: {
          name: this.user.careHomeName
        }
      }).then(res => {
        if (res.code === '200') {
          this.elders = res.data
        } else {
          this.$notify({
            type: 'error',
            title: '获取老人列表错误',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取老人列表错误',
          message: err
        })
      })
    },
    //通过id获取用户名称
    getUserName(id) {
      let user = this.users.find(u => u.userId === id)
      return user ? user.name : ''
    },
    getElderName(id) {
      return this.elders.find(e => e.elderlyId === id).elderlyName
    }
  },
  mounted() {

    //先获取用户信息，如果没有就不做轮询
    let user = localStorage.getItem('user')
    this.user = JSON.parse(user)
    //获取所有用户
    this.getUsers()
    //获取所有老人
    this.getElders()
    //轮询消息列表
    this.getList()
    // this.timer = window.setInterval(() => {
    //   setTimeout(() => {
    //     this.getList()
    //   }, 0)
    // }, 10000)

  },
  destroyed() {
    // window.clearInterval(this.timer)
  },
}
</script>

<style scoped>
/*滚动条*/
::-webkit-scrollbar {
  overflow: auto;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--th);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--lightText);
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: var(--deepBg);
  border-radius: 5px;
}

/*表格*/
.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}

.el-row .el-card {
  min-width: 100%;
  height: 100%;
  margin-right: 20px;
  transition: all .5s;
}

>>> .el-col {
  margin: auto;
}

/*card*/
>>> .el-card {
  background-color: var(--lightBg);
  border: 1px solid var(--inputBorder);
  color: var(--deepText);
}

>>> .el-card__header {
  border-color: var(--deepText);
}

.box-card:hover {
  background-color: var(--hover);
}

.bot {
  display: inline-block;
  float: right;
  height: 12px;
  width: 12px;
  border-radius: 6px;
  background-color: black;
  margin-top: 6px;
  margin-right: 10px;
}

/*按钮*/
.cardBtnStatic {
  cursor: not-allowed;
}

.cardBtnActive {
  cursor: pointer;
}
</style>